<template>
  <div>
    <Editor api-key="5kfymsj8phu2p7rk47v7lw6mcma4sazyx67kr8g6nz2w7w0k" :init="initOpts" />
  </div>
</template>

<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue';

const a = 1;

const initOpts = {
  plugins: [
    'advlist',
    'autolink',
    'link',
    'image',
    'lists',
    'charmap',
    'preview',
    'anchor',
    'pagebreak',
    'searchreplace',
    'wordcount',
    'visualblocks',
    'visualchars',
    'code',
    'fullscreen',
    'insertdatetime',
    'media',
    'table',
    'emoticons',
    'template',
    'help',
  ],
  toolbar:
    'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
    'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
    'forecolor backcolor emoticons | help',
  menu: {
    favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' },
  },
  menubar: 'favs file edit view insert format tools table help',
  content_css: 'css/content.css',
};
</script>

<style scoped lang="scss">
.main-box {
  .btn {
    margin: 10px 0;
  }
}

.myBtns {
  padding: 10px;
}
</style>
